<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>网页的布局</title>
</head>
<body>

<!--
    原始的布局的方式（table）

    网格布局（grid）
        - 网格布局的方式和table类似
        - 在网格布局，将网页分为了一行一行和一列一列的
            通过对这些行和列的设置帮助我们完成布局
        - 网格布局比较适用于复杂的布局
        - 相较于弹性盒，无需设置多余的结构
        - 结构简单，样式复杂

    弹性盒（flex）
        - 弹性盒善于单行单列
        - 多行多列布局时，需要使用不同的结构组合使用
        - 结构复杂，样式简单
-->
<table border="1" width="80%">
    <tr>
        <td colspan="2" height="100">
            <h1>网页的头部</h1>
        </td>
    </tr>
    <tr>
        <td height="400" width="150">菜单</td>
        <td>

            <table width="100%" border="1">
                <tr>
                    <td colspan="3" height="200">
                        上半部分
                    </td>
                </tr>
                <tr>
                    <td height="200">图片</td>
                    <td>图片</td>
                    <td>图片</td>
                </tr>
            </table>

        </td>
    </tr>
    <tr>
        <td colspan="2" height="100">底部</td>
    </tr>
</table>


</body>
</html>